<template>
    <div class="container">
      <div class="app-container">
        <el-table default-expand-all :data="list" row-key="id">
          <el-table-column prop="name" label="责任域" />
          <el-table-column label="部门" align="center" :class="ccc">
            <template v-slot="{ row }">
              <span v-for="dept in row.departments" :key="dept.name" :class="['ccc',  'ellipsis']">
                {{ dept.name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="责任人" align="center">
            <template v-slot="{ row }">
              <span v-for="dept in row.departments" :key="dept.name" :class="['ccc',  'ellipsis']">
                <span class="cnm">{{ dept.responsiblePerson }}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="初始积分" align="center">
            <template v-slot="{ row }">
              <span v-for="dept in row.departments" :key="dept.name" :class="['ccc',  'ellipsis']">
                {{ dept.initialScore }}
              </span>
            </template>
          </el-table-column>
          
          <template v-for="day in days">
            <el-table-column :label="day.label" align="center" :key="day.label">
              <el-table-column label="积分" align="center" :key="day.label">
                <template v-slot="{ row }">
                  <span v-for="dept in row.departments" :key="dept.name" :class="['ccc',  'ellipsis']">
                    {{ getDeductions(dept, day.label, 'deduction') }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column label="原因" align="center" :key="day.label">
                <template v-slot="{ row }">
                  <span v-for="dept in row.departments" :key="dept.name" :class="['ccc',  'ellipsis']">
                    {{ getDeductions(dept, day.label, 'reason') }}
                  </span>
                </template>
              </el-table-column>
            </el-table-column>
          </template>
          
          <el-table-column label="当前积分" align="center">
            <template v-slot="{ row }">
              <span v-for="dept in row.departments" :key="dept.name" :class="['ccc',  'ellipsis']">
                {{ dept.currentScore }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="本周部门扣分" align="center" width="200">
            <template v-slot="{ row }">
              <span v-for="dept in row.departments" :key="dept.name" :class="['ccc',  'ellipsis']">
                {{ dept.weeklyDepartmentDeduction }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template v-slot="{ row }">
              <el-button v-if="row.type === 1" size="mini" type="text" @click="addPermission(row.id, 2)">添加</el-button>
              <el-button type="text" size="mini" @click="editPermission(row.id)">编辑</el-button>
              <el-button type="text" size="mini" @click="delPermission(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  
  <script>
  export default {
    name: 'Department',
    data() {
      return {
        list: [
          {
            id: 1,
            name: '责任域1',
            departments: [
              {
                name: '部门1',
                responsiblePerson: '责任人1',
                initialScore: 100,
                deductions: [
                    { date: '08-12', deduction: 10, reason: '原因1' },
                    { date: '08-13', deduction: 5, reason: '原因2' },
                    { date: '08-14', deduction: 5, reason: '原因2' },
                    { date: '08-15', deduction: 5, reason: '原因2' },
                    { date: '08-16', deduction: 5, reason: '原因2' },
                    { date: '08-17', deduction: 5, reason: '原因2' },
                    { date: '08-18', deduction: 5, reason: '原因2' },
                ],
                currentScore: 90,
                weeklyDepartmentDeduction: 5,
              },
              {
                name: '部门2',
                responsiblePerson: '责任人2',
                initialScore: 100,
                deductions: [
                    { date: '08-12', deduction: 10, reason: '原因1' },
                    { date: '08-13', deduction: 5, reason: '原因2' },
                    { date: '08-14', deduction: 5, reason: '原因2' },
                    { date: '08-15', deduction: 5, reason: '原因2' },
                    { date: '08-16', deduction: 5, reason: '原因2' },
                    { date: '08-17', deduction: 5, reason: '原因2' },
                    { date: '08-18', deduction: 5, reason: '原因22222222222' },
                ],
                currentScore: 90,
                weeklyDepartmentDeduction: 5,
              },
            ],
            type: 1
          },
          {
            id: 1,
            name: '责任域2',
            departments: [
              {
                name: '部门1',
                responsiblePerson: '责任人1',
                initialScore: 100,
                deductions: [
                    { date: '08-12', deduction: 10, reason: '原因1' },
                    { date: '08-13', deduction: 5, reason: '原因2' },
                    { date: '08-14', deduction: 5, reason: '原因2' },
                    { date: '08-15', deduction: 5, reason: '原因2' },
                    { date: '08-16', deduction: 5, reason: '原因2' },
                    { date: '08-17', deduction: 5, reason: '原因2' },
                    { date: '08-18', deduction: 5, reason: '原因2' },
                ],
                currentScore: 90,
                weeklyDepartmentDeduction: 5,
              },
              {
                name: '部门2',
                responsiblePerson: '责任人2',
                initialScore: 100,
                deductions: [
                    { date: '08-12', deduction: 10, reason: '原因1' },
                    { date: '08-13', deduction: 5, reason: '原因2' },
                    { date: '08-14', deduction: 5, reason: '原因2' },
                    { date: '08-15', deduction: 5, reason: '原因2' },
                    { date: '08-16', deduction: 5, reason: '原因2' },
                    { date: '08-17', deduction: 5, reason: '原因2' },
                    { date: '08-18', deduction: 5, reason: '原因22222222222' },
                ],
                currentScore: 90,
                weeklyDepartmentDeduction: 5,
              },
            ],
            type: 1
          },
          {
            id: 1,
            name: '责任域2',
            departments: [
              {
                name: '部门1',
                responsiblePerson: '责任人1',
                initialScore: 100,
                deductions: [
                    { date: '08-12', deduction: 10, reason: '原因1' },
                    { date: '08-13', deduction: 5, reason: '原因2' },
                    { date: '08-14', deduction: 5, reason: '原因2' },
                    { date: '08-15', deduction: 5, reason: '原因2' },
                    { date: '08-16', deduction: 5, reason: '原因2' },
                    { date: '08-17', deduction: 5, reason: '原因2' },
                    { date: '08-18', deduction: 5, reason: '原因2' },
                ],
                currentScore: 90,
                weeklyDepartmentDeduction: 5,
              },
              {
                name: '部门2',
                responsiblePerson: '责任人2',
                initialScore: 100,
                deductions: [
                    { date: '08-12', deduction: 10, reason: '原因1' },
                    { date: '08-13', deduction: 5, reason: '原因2' },
                    { date: '08-14', deduction: 5, reason: '原因2' },
                    { date: '08-15', deduction: 5, reason: '原因2' },
                    { date: '08-16', deduction: 5, reason: '原因2' },
                    { date: '08-17', deduction: 5, reason: '原因2' },
                    { date: '08-18', deduction: 5, reason: '原因22222222222' },
                ],
                currentScore: 90,
                weeklyDepartmentDeduction: 5,
              },
            ],
            type: 1
          },
        ],
        days: [
          { label: '08-12' },
          { label: '08-13' },
          { label: '08-14' },
          { label: '08-15' },
          { label: '08-16' },
          { label: '08-17' },
          { label: '08-18' },
        ],
      };
    },
    methods: {
      getDeductions(department, date, type) {
        const deduction = department.deductions.find(d => d.date === date);
        return deduction ? deduction[type] : '-';
      }
    }
  };
  </script>
  <style scoped>
  .ccc {
    padding: 0 !important;
    flex-direction: column !important;
    display: flex !important;
    -webkit-box-sizing: border-box !important;
     box-sizing: border-box !important;
      margin-left: -10px;
      margin-right: -10px;
      border-top: 1px solid #ccc;
  }
  .ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .el-table .el-table__cell.is-center{
    padding: 0 !important;
  }
  </style>
  
  